<template>
  <div class="container">
    <div style="display: flex">
      <el-input
          placeholder="请输入 '姓名' 或 '出生日期'"
          v-model="input"
          clearable
          style="margin-right: 10px;"
      >
      </el-input>
      <el-button style=" float: right" type="primary" @click="Search"> 搜索</el-button>
    </div>
  </div>
</template>

<script>

export default {
  name: "MianSeach",
  data() {
    return {
      input: '',
      oldusers: [],
      NewUsers: []
    }
  },

  methods: {
    //搜索过滤
    Search() {
      this.NewUsers = this.oldusers.filter(user => {
        return user.name.indexOf(this.input) !== -1 ||
            user.birthday.indexOf(this.input) !== -1;
      });
      //点击搜索情况input框内容
      this.input = '';
      //使用全局事件总线
      this.$bus.$emit('GetNewUsers', this.NewUsers);
      this.$store.state.currentPage = 1;
    },

  },

  activated() {
    setTimeout(() => {
      this.oldusers = this.$store.state.users
      this.NewUsers = this.oldusers.filter(user => {
        return user.name.indexOf(this.input) !== -1;
      })
      //使用全局事件总线
      this.$bus.$emit('GetNewUsers', this.NewUsers)
    }, 50)
  },

  mounted() {
    //adduser

  }

}
</script>

<style scoped>
.container {
  height: 7vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

</style>